<template>
	<div id="ucenter">
		<van-nav-bar
			:title="$route.meta.title"
			left-arrow
			@click-left="this.$router.go(-1)"
			fixed
			safe-area-inset-top
			placeholder
		/>
		<div class="ucenter-header">
			<div class="ucenter-user">
				<img src="https://via.placeholder.com/164" class="avatar" />
				<div class="ucenter-user-info">
					<h4>漫画人250858251</h4>
					<van-tag type="warning">
						<i class="ri-award-fill"></i>
						<span>普通会员</span>
					</van-tag>
				</div>
			</div>
			<div class="statistic">
				<van-grid :border="false" :column-num="3">
					<van-grid-item>
						<div class="statistic-value">1250</div>
						<span>书币</span>
					</van-grid-item>
					<van-grid-item>
						<div class="statistic-value">500</div>
						<span>点券</span>
					</van-grid-item>
					<van-grid-item>
						<div class="statistic-value">34 <small>天</small></div>
						<span>剩余VIP</span>
					</van-grid-item>
				</van-grid>
			</div>
		</div>
		<div class="ucenter-vip">
			<div class="ucenter-vip-content">
				<img src="@/assets/vip.svg" alt="" />
				<span>开通VIP享受尊贵会员特权</span>
			</div>
			<van-button type="warning">立即开通</van-button>
		</div>
	</div>
	<div class="ucenter-menu">
		<van-grid :border="false">
			<van-grid-item
				icon="ri ri-wallet-fill"
				text="充值中心"
				icon-color="#FF3399"
				to="/ucenter/recharge"
			/>
			<van-grid-item
				icon="ri ri-coupon-3-fill"
				text="优惠券"
				icon-color="#FFC53D"
				to="/ucenter/coupon"
			/>
			<van-grid-item
				icon="ri ri-file-mark-fill"
				text="我的书架"
				icon-color="#33FFFF"
				to="/ucenter/favorites"
			/>
			<van-grid-item
				icon="ri ri-medal-fill"
				text="永久域名"
				icon-color="#1890FF"
				@click="httpPopup = true"
			/>
		</van-grid>
	</div>
	<div class="ucenter-cell-list safe-area-inset-bottom">
		<van-cell-group :border="false">
			<van-cell
				class="important"
				icon="ri ri-share-line"
				title="推广赚书币免费看"
				is-link
			/>
			<van-cell
				icon="ri ri-file-list-2-line"
				title="消费记录"
				is-link
				to="/ucenter/consume"
			/>
			<van-cell
				icon="ri ri-shield-keyhole-line"
				title="安全设置"
				is-link
				to="/ucenter/safety"
			/>
			<van-cell
				icon="ri ri-user-3-line"
				title="账号设置"
				is-link
				to="/ucenter/account"
			/>
			<van-cell
				icon="ri ri-question-line"
				title="常见问题"
				is-link
				to="/ucenter/guide"
			/>
			<van-cell
				icon="ri ri-customer-service-line"
				title="联系客服"
				is-link
			/>
			<van-cell
				icon="ri ri-logout-box-r-line"
				title="退出登录"
				is-link
				to="/login"
			/>
		</van-cell-group>
	</div>

	<van-popup v-model:show="httpPopup" :style="{ width: '80vw' }">
		<div class="popup-view">
			<van-cell-group>
				<van-cell title="永久域名" value="design.123kk.me" />
				<van-cell title="官方邮箱" value="123456@gmail.com" />
				<van-cell title="新浪微博" value="123456" />
			</van-cell-group>
		</div>
		<div class="popup-submit">
			<van-button block>关闭</van-button>
		</div>
	</van-popup>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
	setup() {
		const httpPopup = ref(false);

		return {
			httpPopup,
		};
	},
});
</script>
